<template>
  <div id="app">
    <router-view :key="key" />
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {};
  },
  watch: {},
  created() {},
  methods: {},
  computed: {
    key() {
      return this.$route.path + Math.random();
    },
  },
};
</script>
<style lang="scss">
.avue-crud__menu {
  min-height: auto !important;
  min-height: 0 !important;
}

#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.avue--detail .el-col {
  margin-bottom: 0;
}

// .el-table__fixed-body-wrapper {
//   // top: 41px !important;
// }

// .el-message-box {
//   background-color: #fff;
//   border: none;
// }

// .el-message-box__content {
//   color: #333333;
// }

.el-message-box__header {
  padding: 0 !important;
}

.el-message-box__title {
  font-size: 14px;
  // background: #2c3e50 !important;
  color: rgb(48, 49, 51) !important; //
  border-bottom: none;
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
}

.el-message-box__headerbtn .el-message-box__close {
  // color: #fff;
}

// .el-button--primary {
//   color: #fff;
//   border: none;
//   background-color: #409EFF;
// }

.avue-group .el-collapse,
.avue-group .el-collapse-item__wrap {
  border-color: transparent;
}

.el-collapse-item__wrap,
.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

.el-form-item__label {
  color: #333;
}

.el-card {
  border-color: transparent;
  background-color: transparent;
}

.el-pagination__total {
  color: #fff;
}

.el-pagination__jump {
  color: #fff;
}

.avue-crud__right {
  display: none;
}

.el-button--danger {
  color: #fff;
  background-color: #f75444;
  border-color: #f75444;
}

.el-button--danger.is-plain {
  color: #fff;
  background-color: #f75444;
  border-color: #f75444;
}

.avue-crud .el-table th {
  background: transparent;
  color: #333;
}

.el-table tr {
  background-color: transparent;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 0;
}

.el-table thead th .cell {
  border-left: 1px solid #fff;
}

.el-table thead th:first-child .cell {
  border-left: none;
}

.el-table {
  color: #fff;
}

.el-table tr {
  background-color: #f9f9f9;
  color: #333;
  border: 1px solid #ddd;
}

.el-table tr th {
  border-bottom: 1px solid #ddd;
}

.el-table tr:nth-child(2n) {
  background-color: #f9f9f9;
  color: #333;
}

.hover-row td {
  background: #f9f9f9 !important;
}

.el-button--success,
.el-button--success.is-plain {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}

.el-button--warning.is-plain {
  color: #fff;
  background: #e6a23c;
  border-color: #e6a23c;
}

.el-button--info.is-plain {
  color: #fff;
  background: #909399;
  border-color: #909399;
}

.el-input__inner,
.el-date-editor .el-range-input,
.el-date-editor .el-range-separator,
.el-textarea__inner {
  color: #555555;
  background-color: #fff;
  border: 1px solid #ccc;
}

.el-dialog,
.avue-dialog__footer {
  // background-color: #223a73;
}

.avue-crud__dialog__menu {
  padding-right: 40px;
}

.el-dialog__headerbtn {
  top: 12px;
  right: 16px;
  font-size: 18px;
}

.avue-dialog .el-dialog__title,
.avue-dialog .el-drawer__header,
.el-dialog__headerbtn .el-dialog__close,
.avue-crud__dialog__menu i {
  // color: #fff;
}

.el-dialog {
  .el-collapse-item__wrap {
    background-color: transparent !important;
    border-color: transparent !important;
  }
}

.avue-dialog .el-dialog__header {
  background: #2c3e50 !important;
  color: #fff !important;
  border-bottom: none;
  height: 45px;
  min-height: 45px;
  line-height: 45px;
  padding: 0;
  padding-left: 20px;
  font-size: 14px;
}

.avue-dialog__footer {
  border-top: 0;
}

.el-dialog__title {
  font-size: 14px;
  // color: #fff;
}

.avue--collapse .avue-left,
.avue--collapse .avue-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avue-sidebar
  .el-menu--collapse
  > .menu-wrapper
  > .el-submenu
  > .el-submenu__title {
  padding-left: 19px !important;
}

.avue-dialog .el-dialog {
  .avue--detail .el-form-item__content,
  .avue--detail .el-form-item__label {
    // background: #223a73;
    color: #333;
  }

  .avue--detail .el-form-item--medium.el-form-item,
  .avue--detail .el-form-item--mini.el-form-item,
  .avue--detail .el-form-item--small.el-form-item,
  .avue--detail .el-input.is-disabled .el-input__inner,
  .avue--detail .el-range-editor.is-disabled,
  .avue--detail .el-range-editor.is-disabled input,
  .avue--detail .el-textarea.is-disabled .el-textarea__inner,
  .avue--detail .el-input.is-disabled .el-input__inner,
  .avue--detail .el-range-editor.is-disabled,
  .avue--detail .el-range-editor.is-disabled input,
  .avue--detail .el-textarea.is-disabled .el-textarea__inner {
    color: #555555;
    background-color: #fff;
    border: 1px solid #ccc;
  }
}

// .el-tabs__item:first-child {
//   display: none !important;
// }

.el-empty__image {
  display: none;
}

.avue-sidebar {
  width: 100%;
}

@media screen and (max-width: 992px) {
  .avue-header {
    margin-bottom: 0px !important;
    padding-left: 0 !important;
  }
}

// .el-button--primary:active {
//   color: #fff;
//   background: #0e6f5c;
//   background-color: #0e6f5c;
//   border-color: #0a4b3e;
// }

// .el-button--primary:hover {
//   color: #fff;
//   background: #0e6f5c;
//   background-color: #0e6f5c;
//   border-color: #0a4b3e;
// }

// .el-button [class*=el-icon-]+span {
//   margin-left: 4px !important;
// }

.el-button + .el-button {
  margin-left: 4px !important;
}

// .el-dialog__header {

//   background: #2c3e50 !important;
//   color: #fff !important;
//   border-bottom: none;
//   height: 45px;
//   line-height: 45px;
//   padding: 0;
//   padding-left: 20px;
// }

// .el-pagination.is-background .el-pager li:not(.disabled).active {
//   color: #fff;
//   background-color: #409EFF;
// }

// .el-button--text {
//   color: #409EFF;
// }

// .el-button--text:active {
//   color: #409EFF;
// }

// .el-radio__inner {
//   border: 1px solid #8c939d;
// }

// .el-radio__input.is-checked+.el-radio__label {
//   color: #409EFF;
// }

// .el-radio__input.is-checked .el-radio__inner {
//   border-color: #409EFF;
//   background: #409EFF;
// }

// .el-radio__inner:hover {
//   border-color: #409EFF;
// }

// .el-checkbox__inner {
//   border: 1px solid #8c939d;
// }

// .el-checkbox__inner:hover {
//   border-color: #409EFF;
// }

// .el-checkbox__input.is-checked .el-checkbox__inner,
// .el-checkbox__input.is-indeterminate .el-checkbox__inner {
//   background-color: #409EFF;
//   border-color: #409EFF;
// }

// .el-checkbox__input.is-checked+.el-checkbox__label {
//   color: #409EFF;
// }

// .el-button--primary:focus,
// .el-button--primary:active,
// .el-button--primary:hover {
//   color: #fff;
//   background: #0e6f5c;
//   background-color: #0e6f5c;
//   border-color: #0a4b3e;
// }

// .el-button--default:focus,
// .el-button--default:active,
// .el-button--default:hover {
//   color: #409EFF;
//   border-color: #409EFF;
//   background-color: #ecf5ff;
// }

// .el-tabs__item.is-active{
//   color: #409EFF;
// }
// .el-tabs__item:hover{
//   color: #409EFF;
// }
// .el-tabs__active-bar{
//   background-color: #409EFF;
// }
// .el-tabs__item{
//   color: #666;
// }
// .avue-tags{
//   margin-top: 10px
// }
</style>
